<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="taskData"
      tooltip-effect="dark"
      @row-click="rowClick"
      style="width: 100%;cursor: pointer"
      border
      @selection-change="">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>


      <el-table-column
        prop="taskName"
        label="任务名称"
        width="250">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>

      <el-table-column
        label="任务内容"
        width="250">
        <template slot-scope="scope">{{ scope.row.taskContent | ellipsis(scope.row.taskContent)}}</template>
      </el-table-column>

      <el-table-column
        prop="projectName"
        label="所属项目"
        width="150">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>
      <el-table-column
        prop="createrName"
        label="创建人"
        width="150">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>
      <el-table-column
        prop="designeeName"
        label="执行人"
        width="150">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>

      <el-table-column
        label="任务状态"
        width="150"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ statusValue[scope.row.status] }}
          <!--        <el-tag type="success">-->
          <!--          -->
          <!--        </el-tag>-->
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="任务类型"
        width="150">
        <!--        <template slot-scope="scope">{{ scope.row.createDate }}</template>-->
      </el-table-column>
      <el-table-column
        label="优先级"
        width="150">
        <template slot-scope="scope">{{ priorityValue[scope.row.priority] }}</template>
      </el-table-column>
      <el-table-column
        label="计划时间"
        width="250">
        <template slot-scope="scope">{{ scope.row.beginDate }} ~ {{ scope.row.endDate }}</template>
      </el-table-column>
<!--      <el-table-column label="操作" width="150">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            size="mini"-->
<!--            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="danger"-->
<!--            @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <div style="float: right;margin-top: 10px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <div>
      <el-drawer
        class="title"
        title="任务详情"
        :visible.sync="drawer"
        :direction="direction"
        append-to-body
        :before-close="handleDrawerClose">
        <div>
          <el-form :model="taskInfoForm"   ref="taskInfoForm" label-width="100px">
            <el-form-item label="任务名称" prop="taskName" class="lavel">
              <el-input type="text" v-model="taskInfoForm.taskName" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="任务内容" prop="taskContent"  class="lavel">
              <el-input type="textarea" v-model="taskInfoForm.taskContent" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="taskCreater"  class="lavel">
              <div  style="width: 476px;display: inline-flex;border: 1px solid #dedede;
                  height: 38px;border-radius: 5px;cursor: pointer;align-items: center;
                  font-size: 13px;padding-left: 28px;box-sizing: border-box;background-color: #F5F7FA">
                <el-avatar size="small" :src="taskInfoForm.createrFace" style="float: left;margin-left: -17px"></el-avatar>
                <div style="float: left;margin-left: 10px">
                  <span style="color:#C0C4CC;">{{ taskInfoForm.createrName }}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="执行人" prop="taskCreater"  class="lavel">
              <div  style="width: 476px;display: inline-flex;border: 1px solid #dedede;
                  height: 38px;border-radius: 5px;cursor: pointer;align-items: center;
                  font-size: 13px;padding-left: 28px;box-sizing: border-box;background-color: #F5F7FA">
                <el-avatar size="small" :src="taskInfoForm.designeeFace" style="float: left;margin-left: -17px"></el-avatar>
                <div style="float: left;margin-left: 10px">
                  <span style="color:#C0C4CC;">{{ taskInfoForm.designeeName }}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="任务类型" prop="type"  class="lavel">
              <div  style="width: 476px;display: inline-flex;border: 1px solid #dedede;
                  height: 38px;border-radius: 5px;cursor: pointer;align-items: center;
                  font-size: 13px;padding-left: 28px;box-sizing: border-box;background-color: #F5F7FA">
             <span class="el-icon-star-on "
                   style="float: left;margin-left: -10px"
                   :class="{'NORMAL':taskInfoForm.type ==='任务', 'LOW':taskInfoForm.type ==='需求', 'CRITICAL':taskInfoForm.type ==='缺陷'}"></span>
                <div style="float: left;margin-left: 10px">
                  <span style="color:#C0C4CC;">{{ taskInfoForm.type }}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="优先级" prop="priority" style="color: #0e79f3"  class="lavel">
              <div  style="width: 476px;display: inline-flex;border: 1px solid #dedede;
                  height: 38px;border-radius: 5px;cursor: pointer;align-items: center;
                  font-size: 13px;padding-left: 28px;box-sizing: border-box;background-color: #F5F7FA">
             <span class="el-icon-top"
                   style="float: left;margin-left: -10px"
                   :class="{'CRITICAL':taskInfoForm.priority === 1,'MAJOR':taskInfoForm.priority === 2,
                    'NORMAL':taskInfoForm.priority === 3,'LOW':taskInfoForm.priority === 4,'TRIVIAL':taskInfoForm.priority === 5 }"></span>
                <div style="float: left;margin-left: 10px">
                  <span style="color:#C0C4CC;">{{ priorityValue[taskInfoForm.priority] }}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="计划时间" prop="time"  class="lavel">
              <el-date-picker
                v-model= "taskInfoForm.date"
                disabled
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="任务状态" prop="status"  class="lavel">
              <el-select v-model="statusValue[taskInfoForm.status]" placeholder="请选择"  disabled>
                <!--              <el-option-->
                <!--                v-for="item in statusSelect"-->
                <!--                :key="item.value"-->
                <!--                :label="item.label"-->
                <!--                :value="item.value"-->
                <!--              >-->
                <!--              </el-option>-->
              </el-select>
            </el-form-item>

          </el-form>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import taskAPI from "../../../api/task";
export default {
  name: "MyDesTask",
  props:['desChange'],
  data(){
    return{
      taskData:[],
      statusValue:['','待办的','进行中','已完成','已拒绝'],
      priorityValue:['','紧急','重要','普通','较低','最低'],
      statusSelect:'',
      page:{
        pageSize:5,
        currentPage:1,
      },
      total:0,
      taskInfoForm:{},
      drawer: false,
      direction: 'rtl',
    }
  },
  methods:{
    handleEdit(){

    },
    handleDelete(){

    },
    getData(){
      taskAPI.getDesTask(
        this.page.currentPage,
        this.page.pageSize,
        this.statusSelect,
      ).then(res => {
        if (res) {
          this.taskData = res.data.data;
          this.total = res.data.total;
        }

      })
    },
    // 一頁總條數變化
    handleSizeChange(val){
      this.page.pageSize = val;
      this.getData();
    },
    // 頁數變化
    handleCurrentChange(val){
      this.page.currentPage = val;
      this.getData();
    },
    rowClick(row){
      this.drawer = true;
      this.getTaskDetail(row.id)
    },
    // 获取任务详情信息
    getTaskDetail(id){
      taskAPI.getTaskDetail(id).then(res => {
        if (res){
          this.taskInfoForm = res.data
          this.taskInfoForm['date'] = [this.taskInfoForm.beginDate,  this.taskInfoForm.endDate]
        }
      })
    },
    handleDrawerClose(){
      this.drawer = false;
    }
  },
  mounted() {
    this.getData();
  },
  // 过滤器 过滤文本
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "......";
      }
      return value;
    }
  },
  watch:{
    desChange(val){
        this.getData()
    }
  },
}
</script>

<style scoped>
.NORMAL{
  color: #0e79f3;
}
.CRITICAL{
  color: red;
}
.LOW {
  color: #09aa04;
}
.MAJOR {
  color: #f90;
}
.TRIVIAL {
  color: #a1a5a1;
}
</style>
